<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>云服务器远程管理</title>
        <link rel="shortcut icon" href="/static/img/logo-icon.png" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/status.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/settings.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/control.css">
		<link rel="stylesheet" type="text/css" href="../static/css/notification.css">
        <link rel="stylesheet" type="text/css" href="../static/css/messageBox.css">
        <link rel="stylesheet" type="text/css" href="../static/css/file.css">
        <link rel="stylesheet" type="text/css" href="../static/css/traffic.css">
        <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1724800_0ffonp78ygnr.css">
	</head>
	<body>
		<div class="views">
			<ul class="item sider list">
                <li class="logo">
                    <img src="/static/img/logo.png" alt="">
                </li>
				<li class="item active" data-to="status">
					<span class="iconfont icon-cpu"></span>
                    <span>服务器状态</span>
				</li>
				<li class="item" data-to="console">
					<span class="iconfont icon-code1"></span>
					<span>客户端控制台</span>
				</li>
                <li class="item" data-to="traffic">
					<span class="iconfont icon-anquan1"></span>
					<span>流量安全检测</span>
				</li>
                <li class="item" data-to="fileupload">
					<span class="iconfont icon-database"></span>
					<span>文件分发</span>
				</li>
				<li class="item" data-to="setting">
                    <span class="iconfont icon-default1"></span>
					<span>服务器配置</span>
				</li>
                <li class="logout">
                    <i class="iconfont icon-logout-box-line"></i>
                    <span class="logout-btn">退出登录</span>
                </li>
			</ul>
			<ul class="item content">
				<li class="content-item status">
					<div class="title">服务器状态</div>
                    <div class="service_main_usage" style="">
                        <div class="service_usage_label">
                            <span class="name">硬件使用率 (%)</span>
                            <span class="cpu">
                                <span class="legend-dots" style="background:linear-gradient(to right, rgb(255, 128, 171), rgb(255, 182, 92))"></span>
                                <span>CPU 使用率:</span> <span class="uvs">20%</span>
                            </span>
                            <span class="ram">
                                <span class="legend-dots" style="background:linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))"></span>
                                <span>RAM 使用率:</span> <span class="uvs">10%</span>
                            </span>
                        </div>
                        <div id="cpu-status"></div>
                    </div>
					<div class="content-views">
						<div class="server_status">
							<div id="status_icon" class="status_stop"></div>
							<div class="statusText" id="status_statetext">服务器未运行。</div>
						</div>
						<div class="btn btn-success start-server">开启服务器</div>
						<div class="btn btn-danger stop-server">关闭服务器</div>
					</div>
				</li>
				<li class="content-item control" style="display: none;">
					<div class="title">客户端控制台</div>
					<div class="content-views">
						<div class="control-item client-list">
							<div class="client-title">在线列表</div>
							<ul>
							</ul>
						</div>
						<div class="control-item command-prompt">
							<form action="javascript:service.send($('#cmd').val());">
								<input type="text" name="command" id="cmd">
							</form>
							<div class="command-response" id="response"></div>
						</div>
						<div class="control-item client_usage_views" id="client_usage" style="display: none">
							<div class="client_main_usage" style="">
								<div class="client_usage_label">
									<span class="name">硬件使用率 (%)</span>
									<span class="cpu">
										<span class="legend-dots" style="background:linear-gradient(to right, rgb(255, 128, 171), rgb(255, 182, 92))"></span>
										<span>CPU 使用率:</span> <span class="uvs">20%</span>
									</span>
									<span class="ram">
										<span class="legend-dots" style="background:linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))"></span>
										<span>RAM 使用率:</span> <span class="uvs">10%</span>
									</span>
								</div>
								<div id="client_main_usage_charts"></div>
							</div>
							<div class="client_disk_usage" style="height: 60%; width: 100%">
							</div>
						</div>
					</div>
				</li>
                <li class="content-item traffic" style="display: none">
					<div class="title">流量安全检测 Waf</div>
                    <div class="content-views">
                        <div class="traffic__title">受击记录统计</div>
                        <div class="attacks__cumulative">
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>累计受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>XSS注入 累计受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>SQL注入 累计受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>今日受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>XSS注入 今日受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                            <div class="attacks__cumulative-item">
                                <div class="ck">
                                    <div class="attacks__cumulative-item-label">
                                        <span class="iconfont icon-triangle"></span>
                                        <span>SQL注入 今日受击</span>
                                    </div>
                                    <div class="attacks__cumulative-item-value">0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-views">
                        <div id="traffic_list_table"></div>
                    </div>
				</li>
                <li class="content-item fileupload" style="display: none">
					<div class="title">文件分发</div>
                    <div class="content-views">
                        <div class="content-views_file-item input__file">
                            <div class="input__file-block">
                                <img src="../static/img/upload.png" alt="">
                                <span>请选择文件</span>
                            </div>
                            <input type="file" name="" id="file_upload">
                        </div>
                        <div class="content-views_file-item" id="file_perview"></div>
                    </div>
                    <div class="content-views">
                        <div class="file_upload_t">
                            <div class="file_upload_t-item">
                            </div>
                            <div class="file_upload_t-item" style="text-align: right">
                            </div>
                        </div>
                        <div id="file_upload_list_table"></div>
                    </div>
				</li>
				<li class="content-item settings" style="display: none;">
					<div class="title">服务器配置</div>
					<div class="content-views">
						<div class="Note">
							注意: 在重新启动服务器之前，不会应用对这些设置的更改。
						</div>
						<div class="config-list">
							<div class="config-item">
								<span class="label">
									<div class="setting-label-name">服务器地址</div>
									<div class="setting-label-description">你可以在这里设置服务器对外开放的IP地址, 默认为 0.0.0.0 所有</div>
								</span>
								<input type="text" name="host" id="server_host" class="input-control" value="0.0.0.0">
							</div>
							<div class="config-item">
								<span class="label">
									<div class="setting-label-name">服务器端口</div>
									<div class="setting-label-description">你可以在这里设置服务器对外开放的端口, 默认为 8888 </div>
								</span>
								<input type="number" name="port" id="server_port" class="input-control" value="8888">
							</div>
						</div>
						<div class="btn btn-primary" style="margin-top: 20px;" id="set_options">保存设置</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="notification__list"></div>
	</body>
</html>
<script type="text/javascript" src="../static/js/jquery.js"></script>
<script type="text/javascript" src="../static/js/table.js"></script>
<script type="text/javascript" src="../static/js/notification.js"></script>
<script type="text/javascript" src="../static/js/messageBox.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/socket.io.min.js"></script>
<script type="text/javascript" src="../static/js/reponse.js"></script>
<script type="text/javascript" src="../static/js/socket.js"></script>
<script type="text/javascript" src="../static/js/service.js"></script>
<script type="text/javascript" src="../static/js/client_control_panel.js"></script>
<script type="text/javascript" src="../static/js/common.js"></script>
<script type="text/javascript" src="../static/js/slider.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
<script type="text/javascript" src="../static/js/client_usage_chart.js"></script>
<script type="text/javascript" src="../static/js/echats.js"></script>
<script type="text/javascript" src="../static/js/resize.js"></script>
<script type="text/javascript" src="../static/js/file.js"></script>
<script type="text/javascript" src="../static/js/traffic.js"></script>